<template>
  <div>
    <APPHeader></APPHeader>
    <div class="banner">
      <img src="images/img1.png" alt="" />
    </div>
    <div class="content">
      <div class="main inner">
        <div
          class="item"
          v-for="item in list"
          :key="item.gid"
          @click.prevent="change(item.gid)"
        >
          <img :src="item.gurl" alt="" />
          <p>{{ item.gname }}</p>
          <p>
            <span>￥{{ item.gprice }}</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
      </div>
    </div>
    <div class="c-nav">
      <img src="images/logo2.png" alt="" class="banr" />
      <div class="inner main">
        <div class="item">
          <img src="images/img2.png" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img2.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img3.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img4.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img5.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
      </div>
    </div>
    <div class="c-nav">
      <img src="images/logo2.png" alt="" class="banr" />
      <div class="inner main">
        <div class="item">
          <img src="images/img2.png" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img2.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img3.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img4.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img5.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img6.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img2.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
      </div>
    </div>
    <div class="c-nav">
      <img src="images/logo2.png" alt="" class="banr" />
      <div class="inner main">
        <div class="item">
          <img src="images/img2.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img3.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img4.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img5.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img6.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img2.png" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
        <div class="item">
          <img src="images/img2.jpg" alt="" />
          <p>PUMA彪马2020新款男鞋女鞋RIDER复古撞色低帮休闲鞋运动鞋371602</p>
          <p>
            <span>￥248</span>
            <span>￥599</span>
            <button>立即抢购</button>
          </p>
        </div>
      </div>
    </div>
    <div class="footer">
      <img src="images/footer.png" alt="" />
    </div>
  </div>
</template>

<script>
import { Getgoods } from '@/api/goods'
import APPHeader from '../components/APPHeader.vue'
import { Toast } from 'vant'
export default {
  data() {
    return {
      list: []
    }
  },
  components: {
    APPHeader
  },
  async created() {
    let result = await Getgoods({
      headers: {
        token: localStorage.getItem('token')
      }
    })
    console.log(result)
    if (result.data.code == 403) {
      alert(result.data.msg)
      setTimeout(() => {
        location = '/login'
      }, 1000)
    }
    this.list = result.data.data
    console.log(this.list)
  },
  methods: {
    change(id) {
      this.$router.push({
        name: 'index',
        params: {
          id: id
        }
      })
    },
    Toast() {
      Toast('该功能未开发,请敬请期待!')
    }
  }
}
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}

.main {
  width: 1200px;
  margin: 0 auto;
  border: none;
  min-width: 1200px;
}

.banner img {
  width: 100%;
}

.content {
  width: 100%;
}

.content .inner {
  height: 740px;
}

.item {
  float: left;
  width: 280px;
  height: 350px;
  cursor: pointer;
  margin: 0px 5px 20px;
  box-sizing: border-box;
}

.item img {
  // padding: 0 30px;
  width: 278px;
  height: 250px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.item:hover {
  border: 1px solid #c40000;
}

.item p {
  padding: 5px;
  font-size: 12px;
  line-height: 20px;
}

.item p span:nth-child(1) {
  color: #c40000;
  font-size: 20px;
}

.item p span:nth-child(2) {
  text-decoration: line-through;
}

.item button {
  background-color: #000;
  color: white;
  width: 80px;
  margin-left: 90px;
  cursor: pointer;
}
.c-nav {
  width: 100%;
}
.c-nav .inner {
  height: 740px;
  display: flex;
  flex-wrap: wrap;
}
.c-nav .banr {
  width: 100%;
}
.footer {
  width: 100%;
}
.footer img {
  width: 100%;
}
</style>
